<template>
  <view class="move-container">
    <view class="header-container">
      <u-subsection
        :list="auditTypeList"
        :current="currentAuditType"
        active-color="#56d39d"
        @change="changeAuditType"></u-subsection>
      <view class="tabs-container">
        <u-tabs
          v-if="searchForm.type == 10"
          :list="makeArtworksTypeAllListData"
          :current="tabsCurrent"
          inactive-color="#606266"
          active-color="#56d39d"
          :gutter="20"
          bg-color="transparent"
          class="tabs-content"
          name="category_name"
          :is-scroll="false"
          @change="makeArtworksTabsChange">
        </u-tabs>
        <u-tabs
          v-else
          :list="artworksTypeAllListData"
          :current="tabsCurrent"
          inactive-color="#606266"
          active-color="#56d39d"
          :gutter="20"
          bg-color="transparent"
          class="tabs-content"
          name="type_name"
          @change="tabsChange">
        </u-tabs>
      </view>
    </view>
    <!-- 作品 -->
    <view class="artworks-list-container">
      <!-- 头像、表情包 -->
      <ArtworksSquareList
        v-if="searchForm.type == 2 || searchForm.type == 3"
        :artworks-list="artworksList"
        @handleCheckBox="handleCheckBox"/>
      <!-- 壁纸 -->
      <WallpaperArtworksList
        v-if="searchForm.type == 1 || searchForm.type == 9 || searchForm.type == 11"
        :artworks-list="artworksList"
        @handleCheckBox="handleCheckBox"/>
      <!-- 动态壁纸 -->
      <BgArtworksList
        v-if="searchForm.type == 6"
        :artworks-list="artworksList"
        @handleCheckBox="handleCheckBox"/>
      <!-- 背景 -->
      <VideoArtworksList
        v-if="searchForm.type == 4 || searchForm.type == 8"
        :artworks-list="artworksList"
        @handleCheckBox="handleCheckBox"/>
      <!-- 电视剧 -->
      <TvArtworksList
        v-if="searchForm.type == 5"
        :artworks-list="artworksList"
        @handleCheckBox="handleCheckBox"/>
      <!-- 定制作品 -->
      <MakeAllArtworksList
        v-if="searchForm.type == 10"
        :artworks-list="artworksList"
        :is-album="true"
        @handleCheckBox="handleCheckBox"/>
    </view>
    <!-- 提示没有数据 -->
    <u-empty v-if="!loading" text="没有更多的数据啦~" mode="data" style="margin-bottom: 100rpx"></u-empty>
    <!-- 操作栏 -->
    <!-- #ifdef H5 -->
    <view class="bottom-main">
      <view class="bottom-view">
        <block>
          <view @click="goBack()" class="bottom-view-button bottom-view-button-margin0">
            <text class="huiju-iconfont huiju-icon-fanhui1"></text>
            <text class="bottom-view-button-text">返回上一页</text>
          </view>
        </block>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
  import ArtworksSquareList from '@/components/artworksList/artworksSquareList.vue'; // 头像、表情包
  import WallpaperArtworksList from '@/components/artworksList/artworksList3.vue'; // 壁纸
  import BgArtworksList from '@/components/artworksList/artworksBgList.vue'; // 背景
  import VideoArtworksList from '@/components/artworksList/videoArtworksList3.vue'; // 动态背景
  import TvArtworksList from '@/components/artworksList/tvArtworksList.vue'; // 电视剧
  import MakeAllArtworksList from '@/components/artworksList/makeAllArtworksList.vue'; // 全部
  import { makeArtworksTypeAllList } from '@/api/applet';
  import { mapGetters, mapState } from 'vuex';
  import {
    findAllArtworksList
  } from '@/api/artworks';
  export default {
    components: {
      ArtworksSquareList,
      WallpaperArtworksList,
      BgArtworksList,
      VideoArtworksList,
      TvArtworksList,
      MakeAllArtworksList
    },
    data() {
      return {
        loading: true,
        currentAuditType: 1,
        tabsCurrent: 0,
        auditTypeList: [{
        name: '审核中'
        }, {
          name: '已审核'
        }, {
          name: '已拒绝'
        }],
        artworksList: [], // 作品列表
        searchForm: {
          author_id: '',
          type: '',
          audit_status: 'success',
          cate_id: ''
        },
        makeArtworksTypeAllListData: []
      }
    },
    onLoad(options) {
      this.searchForm.author_id = options.author_id;
      this.searchForm.type = options.type;
      this.tabsCurrent = options.tabsCurrent;
      this.getArtworksTypeAllListData();
      this.getAllArtworksList();
    },
    computed: {
      ...mapGetters([
        'artworksTypeAllListData',
      ]),
    },
    methods: {

      // 作品分类
      getArtworksTypeAllListData() {
        makeArtworksTypeAllList().then(result => {
          if (result && result.data) {
            this.makeArtworksTypeAllListData = result.data;
          }
        })
      },

      // 根据主页id和作品类型去获取作品列表
      getAllArtworksList() {
        this.loading = true;
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
        })
        findAllArtworksList(this.searchForm).then(result => {
          this.loading = false;
          uni.hideToast();
          if (result && result.data) {
            let list = result.data.list;
            list.forEach(item => {
              item.checked = false;
            })
            this.artworksList = list;
          }
        })
      },

      // 修改移动图片的类型
      changeAuditType(index) {
        this.currentAuditType = index;
        if (index === 0) {
          this.searchForm.audit_status = 'review';
        } else if (index === 1) {
          this.searchForm.audit_status = 'success';
        } else if (index === 2) {
          this.searchForm.audit_status = 'reject';
        }
        this.getAllArtworksList();
      },

      // 修改类型
      tabsChange(index) {
        this.searchForm.type = this.artworksTypeAllListData[index].id;
        this.artworksList = [];
        this.tabsCurrent = index;
        this.getAllArtworksList();
      },

      // 修改定制作品类型
      makeArtworksTabsChange(index) {
        this.searchForm.cate_id = this.makeArtworksTypeAllListData[index].id;
        this.artworksList = [];
        this.tabsCurrent = index;
        this.getAllArtworksList();
      },

      // 返回
      goBack() {
        let pages = getCurrentPages();
        let pagesLength = pages.length;

        if (pagesLength > 1) {
          uni.navigateBack({
            delta: 1,
          })
        } else {
          uni.switchTab({ url: '/pages/creativeCenter/index' });
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .move-container{
    padding: 230rpx 32rpx 120rpx 32rpx;

    .header-container{
      height: 210rpx;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: 32rpx 32rpx 0 32rpx;
      background-color: #fff;
      z-index: 9;
    }

    .tabs-container{
      padding: 12rpx 0;
    }

    .bottom-main{
      position: fixed;
      bottom: calc(var(--window-bottom) + 60rpx);
      z-index: 20;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      z-index: 2;

      .bottom-view{
        display: flex;
        justify-content: center;
        min-width: 260rpx;
        padding: 24rpx 30rpx;
        background: #fff;
        border: 2rpx solid $uni-color-primary2;
        border-radius: 92rpx;

        &-button{
          color: $uni-color-primary;
          font-size: 24rpx;
          position: relative;
          white-space: nowrap;

          &-text{
            color: $uni-color-primary;
            padding-left: 6rpx;
          }
        }

        &-button-before{
          &::before{
            content: "";
            position: absolute;
            right: 0;
            width: 2rpx;
            height: 32rpx;
            background: #e9e9e9;
          }
        }

        &-button-padding{
          padding-right: 16rpx;
          margin-right: 16rpx;
        }

        &-button-margin0{
          margin-right: 0;
          padding-right: 0;
        }
      }
    }
  }
</style>
